<template>
	<view class="content">
		<button class="avatar-btn"  open-type="chooseAvatar" @chooseavatar="onChooseavatar">
			<image class="logo" :src="avatar"></image>
		</button>
		
		<view class="login-area">
			<img :src="loginImgUrl" class="login-image" @click="wechatLogin"/>
			<text>微信登陆</text>
		</view>
			
	</view>
</template>

<script>
	import user from '@/api/backend/wechat/user.js'
	import user_const from '@/constant/user/user.js'
	export default {
		data() {
			return {
				title: '我是姚兵',
				loginImgUrl:'/static/images/wechat.svg',
				avatar:'/static/images/default_avatar.svg'
			}
		},
		
		created(){
		},
		
		mounted(){
		},
		
		onLoad() {
			
		},
		methods: {
			
			wechatLogin(){
				
				uni.showLoading({
					title: '正在登陆...',
					mask:false,
					success() {
						console.log("hah")
					}
				});
				// #ifdef MP-WEIXIN
				wx.login({
					success:(res)=>{
						user.login(res.code).then(res=>{
							uni.setStorageSync(user_const.USER_LOGIN_RESULT,res.data)
							this.gotoMainPage()
						}).finally(()=>{
							uni.hideLoading()
						})
					},
					fail() {
						uni.hideLoading()
					}
				})
				// #endif
				
				// #ifndef MP-WEIXIN
					// this.gotoMainPage()
				// #endif
			
			},
			
			gotoMainPage(){
				uni.switchTab({
					url:'/pages/index/index',
					success:function(){
					}
				})
			},
			onChooseavatar(res){
				this.avatar=res.detail.avatarUrl
			},
			getUserProfile(){
				  wx.getSetting({
				    success (res){
				      if (res.authSetting['scope.userInfo']) {
				        // 已经授权，可以直接调用 getUserInfo 获取头像昵称
				       wx.getUserProfile({lang:"zh_CN",desc:"获取用户信息，测试环境",success:function(res){
				       }})
				      }
				    }
				  })
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		height: 100%;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		display: block;
	}

	.avatar-btn{
		height: 200rpx;
		width: 200rpx;
		padding: 0;
	}
	
	.login-area{
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 28rpx;
	}
	
	.login-image{
		width: 150rpx;
		height: 150rpx;
	}
	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
